<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script>
        var _chaturl = _chathost + "/chat/?key=" + _chatkey;
        var _chatjsUrl = _chathost + '/chat/assets/js/jquery-3.4.1.min.js'
        document.write('<script type="text/javascript" src="' + _chatjsUrl + '"><\/script>');
    </script>
    <style>
        body {
            margin: 0;
            height: 100vh;
            overflow: hidden;
        }

        body::-webkit-scrollbar {
            display: none;
        }

        .linkPage {
            height: 0;
            width: 0;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0, 0, 0, .2);
            position: absolute;
            bottom: 35px;
            right: 125px;
            transition: all .5s;
            z-index: 2;
        }

        .linkPageActive {
            height: 760px;
            width: 440px;
            bottom: 95px;
            right: 185px;
        }

        .zk {
            width: 50px;
            height: 50px;
            border-radius: 100%;
            background: #3399ff;
            color: #fff;
            text-align: center;
            line-height: 50px;
            position: absolute;
            bottom: 55px;
            right: 145px;
            transform: translate(50%, 50%);
            box-shadow: 0 0 15px #3399ff;
            cursor: pointer;
            z-index: 5;
            outline: none;
        }

        .zk::before,
        .zk::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            border: 1px solid #3399ff;
            border-radius: 100%;
            transform: translate(-50%, -50%) scale(1);
            transition: all .5s;
            animation: buttonRing 1.2s infinite linear;
            outline: none;
        }

        .zk::before {
            animation: buttonRing 1.2s .6s infinite linear;
            border: 1px solid #84c2ff;
        }

        .zk2::before,
        .zk2::after {
            animation: none !important;
        }

        @keyframes buttonRing {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }

            100% {
                transform: translate(-50%, -50%) scale(1.6);
                opacity: 0;
            }
        }

        .zk-yd {
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background: #652dff;
            box-shadow: 0 0 8px #652dff;
            position: absolute;
            bottom: 65px;
            right: 122px;
            z-index: 6;
            animation: buttonYD .6s infinite alternate linear;
            transition: all .5s;
        }

        @keyframes buttonYD {
            0% {
                transform: scale(1);
            }

            0% {
                transform: scale(1.5);
            }
        }

        .clos-chat {
            width: 24px;
            height: 24px;
            position: absolute;
            bottom: 43px;
            right: 133px;
            cursor: pointer;
            transition: all .5s;
            z-index: 4;
        }

        .clos-chat-active {
            bottom: 818px;
            right: 201px;
        }

        .clos-chat:hover {
            transform: rotate(180deg);
        }

        .gzy {
            width: 100%;
            height: 100vh;
        }

        .meng-ban {
            width: 100%;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            opacity: 0;
            pointer-events: none;
            transition: all .5s;
            background: rgba(0, 0, 0, .6);
        }

        .meng-ban-active {
            opacity: 1;
            pointer-events: all;
        }
    </style>
</head>

<body>

    <div class="meng-ban"></div>
    <div class="zk" id="chat-zk">客服</div>
    <div class="zk-yd"></div>
    <iframe id="chatUrl" class="linkPage" src="" frameborder="0"></iframe>
    <div class="clos-chat">
        <svg t="1573548637491" class="icon" viewBox="0 0 1366 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="781" width="24" height="24">
            <path
                d="M765.20699997 506.50066667l404.184-404.22a52.811 52.811 0 0 0 0-74.401l-2.217-2.217a52.836 52.836 0 0 0-74.413 0l-404.209 404.73-404.22-404.9a52.823 52.823 0 0 0-74.401 0l-2.217 2.217a51.915 51.915 0 0 0 0 74.414l404.22 404.377-404.22 404.22a52.823 52.823 0 0 0 0 74.402l2.217 2.217a52.811 52.811 0 0 0 74.401 0l404.22-404.22 404.22 404.22a52.823 52.823 0 0 0 74.414 0l2.217-2.217a52.811 52.811 0 0 0 0-74.401z m0 0"
                fill="#ffffff" p-id="782"></path>
        </svg>
    </div>



    <script>
        $(document).ready(function () {
            document.getElementById('chatUrl').src = _chaturl;
            var isZK = false;
            function OpenChat() {
                $('.linkPage').addClass('linkPageActive');
                $('.zk::before').css('opacity', '0');
                $('.zk::after').css('opacity', '0');
                $('.zk-yd').css('opacity', '0');
                $('.zk').addClass('zk2');   //清除before动画
                $('.clos-chat').addClass('clos-chat-active');
                $('.meng-ban').addClass('meng-ban-active');
                isZK = true;
            }
            function ClosChat() {
                $('.linkPage').removeClass('linkPageActive');
                $('.zk::before').css('opacity', '1');
                $('.zk::after').css('opacity', '1');
                $('.zk-yd').css('opacity', '1');
                $('.zk').removeClass('zk2');    //添加before动画
                $('.clos-chat').removeClass('clos-chat-active');
                $('.meng-ban').removeClass('meng-ban-active');
                isZK = false;
            }

            $('.zk').click(function () {
                if (isZK == false) {
                    OpenChat();
                } else {
                    ClosChat();
                }
            });

            $('.clos-chat, .meng-ban').click(function () {
                ClosChat();
            });
        });

    </script>
</body>

</html>